<template>
    <require from="./em-editable-input.less"></require>
    <div class="em-editable-input ${editing ? 'editing' : ''}">
        <div class="text" click.delegate="editHandler()"><span>${value}</span><i class="edit icon"></i></div>
        <div class="input">
            <div class="ui input">
                <input ref="inputRef" keydown.trigger="keydownHandler() & key" keyup.trigger="keyupHandler() & key" type="text" value.bind="value" placeholder="${placeholder}">
            </div>
            <div ref="actionsRef" class="actions">
                <button click.delegate="okHandler()" class="ui left attached icon mini button"><i class="checkmark icon"></i></button>
                <button click.delegate="cancelHandler()" class="right attached ui icon mini button"><i class="remove icon"></i></button>
            </div>
        </div>
    </div>
</template>
